<!--综合查询-->
<template>
  <div class="containter">
    <div>
      <p class="content-tit">查询条件</p>
      <el-form :label-position="labelPosition" label-width="100px" :model="formData">
        <el-row type="flex" class="row-bg">
          <el-col :span="7">
            <el-form-item label="单证编码" prop="houseNum" size="mini" :required="false">
              <el-select v-model="formData.certifyCode" clearable filterable placeholder="请选择">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="单证名称" prop="houseNum" size="mini" :required="false">
              <el-input v-model="formData.certifyName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="单证版本" prop="houseNum" size="mini" :required="false">
              <el-select v-model="formData.certifyEdition" clearable filterable placeholder="请选择">
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="7">
            <el-form-item label="管理机构" size="mini">
              <el-select v-model="formData.d" placeholder="请选择">
                <el-option
                  v-for="item in manage"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="开始日期" prop="houseNum" size="mini" :required="false">
              <el-date-picker type="date" v-model="formData.startDate" placeholder="选择时间" :value-format="'yyyy-MM-dd'"
                              :format="'yyyy-MM-dd'"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="终止日期" prop="houseNum" size="mini" :required="false">
              <el-date-picker type="date" v-model="formData.endDate" placeholder="选择时间" :value-format="'yyyy-MM-dd'"
                              :format="'yyyy-MM-dd'"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div align="right">
        <el-button type="primary" @click="" icon="el-icon-search">查询</el-button>
      </div>
    </div>
    <div>
      <p class="content-tit">
        <span @click="isShow('isShowSingles')" v-if='isShowSingles'>-</span>
        <span @click="isShow('isShowSingles')" v-else>+</span>单证综合报表
      </p>
      <el-table :data="certifysList" ref="certifysList" @selection-change="handleSelectionChange" style="width: 100%"
                class='table-common' :highlight-current-row="true" border
                v-show="isShowSingles">
        <el-table-column label="#" checked="selectionData"
                         type="selection"
                         min-width="6%">
        </el-table-column>
        <el-table-column label="序号" type='index' min-width="8%" align="center"></el-table-column>
        <el-table-column prop="dicTypeId" label="机构编码" min-width="9%" align="center"></el-table-column>
        <el-table-column prop="TypeDis" label="机构名称" min-width="9%" align="center"></el-table-column>
        <el-table-column prop="dicTypeId" label="单证编码" min-width="9%" align="center"></el-table-column>
        <el-table-column prop="TypeDis" label="单证名称" min-width="9%" align="center"></el-table-column>
        <el-table-column prop="certifyEdition" label="单证版本" min-width="9%" align="center"></el-table-column>
        <el-table-column prop="dicType" label="正常使用自动回销" min-width="9%" align="center"></el-table-column>
        <el-table-column prop="TypeDis" label="正常使用手工回销" min-width="9%" align="center"></el-table-column>
        <el-table-column prop="TypeDis" label="使用作废" min-width="9%" align="center"></el-table-column>
        <el-table-column prop="certifyType" label="停用作废" min-width="8%" align="center"></el-table-column>
        <el-table-column prop="certifyOperType" label="遗失" min-width="8%" align="center"></el-table-column>
        <el-table-column label="销毁" min-width="14%" align="center"></el-table-column>
      </el-table>
      <div class="mar15 " align="right" v-show="isShowSingles">
        <el-pagination
          @current-change="handleCurrentChangeSingle"
          :current-page="selfPage.currentPage"
          :page-size="selfPage.perPage"
          layout="total, prev, pager, next, jumper"
          :total="selfPage.totalSize">
        </el-pagination>
      </div>
      <div align="right">
        <el-button type="primary" @click="">打印</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "zhcx",
    data() {
      return {
        labelPosition: "right",
        isShowSingles: true,
        dialogFormVisible: false,
        formData: {
          startDate: "",
          endDate: "",
          certifyCode: '',
          loginComcode: '',
          certifyType: '',
          certifyOperType: '',
          operator: '',
          operatorDate: ''
        },
        certifyCodeList: [],
        certifyTypeList: [],
        certifyOperTypeList: [],
        certifysList: [],
        selfPage: {
          currentPage: 1,
          hasMore: true,
          perPage: 10,
          totalPage: 0,
          totalSize: 0
        },
      }
    },
    methods: {
      isShow(val) {
        this[val] = !this[val]
      },
      handleSelectionChange(val) {
        this.selectionData = val;
      },
      handleCurrentChangeSingle(num) {
        this.selfFormData.pageNum = num
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>

</style>
